<script setup lang="ts">
import type { componentType } from './index'
import { ref } from 'vue'
import draggable from 'vuedraggable'
import { baseComponentList, businessComponentList } from './index'

const emit = defineEmits(['handleDragStart'])
// 组件列表
const _baseComponentList = ref<componentType[]>(baseComponentList)
const _businessComponentList = ref<componentType[]>(businessComponentList)

function cloneComponent(component: componentType) {
  emit('handleDragStart', component)
}
</script>

<template>
  <div class="h-full">
    <div>
      <div class="title">
        基础组件
      </div>
      <draggable
        :list="_baseComponentList" :group="{ name: 'form-components', pull: 'clone', put: true }"
        :clone="cloneComponent" class="grid grid-cols-2 gap-2" :sort="false" :animation="150" ghost-class="ghost"
        chosen-class="chosen"
      >
        <template #item="{ element }">
          <div
            class="cursor-move flex justify-center items-center w-full h-[30px] border-solid border-[1px] border-[#e4e7ed] mt-2 text-[12px]"
          >
            <ElIcon size="14px" style="margin-right: 4px;">
              <component :is="element.icon" />
            </ElIcon>
            <span> {{ element.name }}</span>
          </div>
        </template>
      </draggable>
    </div>
    <ElDivider />
    <div class=" mt-[20px]">
      <div class="title">
        业务组件
      </div>
      <draggable
        :list="_businessComponentList" :group="{ name: 'form-components', pull: 'clone', put: true }"
        :clone="cloneComponent" class="grid grid-cols-2 gap-2" :sort="false" :animation="150" ghost-class="ghost"
        chosen-class="chosen"
      >
        <template #item="{ element }">
          <div
            class="cursor-move flex justify-center items-center w-full h-[30px] border-solid border-[1px] border-[#e4e7ed] mt-2 font-medium text-[12px]"
          >
            <ElIcon size="14px" style="margin-right: 4px;">
              <component :is="element.icon" />
            </ElIcon>
            <span>{{ element.name }}</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>
</template>

<style scoped>
/* 拖拽时的占位元素样式 */
.ghost {
  background-color: rgba(64, 158, 255, 0.1);
  border: 1px dashed var(--el-color-primary);
}

/* 选中拖拽元素时的样式 */
.chosen {
  background-color: var(--el-color-primary-light-5);
  border-color: var(--el-color-primary-light-5);
}

.title {
  position: relative;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

.title:after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -7px;
  display: block;
  width: 3px;
  height: 15px;
  background-color: var(--el-color-primary);
}
</style>
